<template>
  <view :class="{ 'gray-mode': isGray }">
    <div
      @click="switchTab('0')"
      style="margin-top: 10px; height: 30px; background: #faf0f0">
      更新TAB 111，ICON使用的是网络图片路径
    </div>
    <div
      @click="switchTab('1')"
      style="margin-top: 10px; height: 30px; background: green">
      更新TAB 222
    </div>
    <div
      @click="switchTab('2')"
      style="margin-top: 10px; height: 30px; background: blanchedalmond">
      更新TAB 333
    </div>
    <div
      @click="switchTab('3')"
      style="margin-top: 10px; height: 30px; background: chocolate">
      更新TAB 444
    </div>
    <div
      @click="switchTab('4')"
      style="margin-top: 10px; height: 30px; background: chartreuse">
      修改TAB 444 跳转, 进入TAB新页面1
    </div>
    <div
      @click="switchTab('5')"
      style="margin-top: 10px; height: 30px; background: darkkhaki">
      隐藏TAB 444
    </div>
    <div
      @click="switchTab('6')"
      style="margin-top: 10px; height: 30px; background: mediumaquamarine">
      隐藏TAB 444,并展示TAB 555
    </div>

    <div
      @click="switchTab('7')"
      style="margin-top: 10px; height: 30px; background: red">
      背景置灰
    </div>

    <div
      @click="switchTab('8')"
      style="margin-top: 10px; height: 30px; background: darkgrey">
      TAB 111 添加右上角红点
    </div>
    <div
      @click="switchTab('10')"
      style="margin-top: 10px; height: 30px; background: darkgrey">
      TAB 111 删除红点
    </div>

    <div
      @click="switchTab('9')"
      style="margin-top: 10px; height: 30px; background: antiquewhite">
      TAB 222 添加右上角文字
    </div>

    <div
      @click="switchTab('11')"
      style="margin-top: 10px; height: 30px; background: antiquewhite">
      TAB 222 删除文字
    </div>

    <div style="height: 100px"></div>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 动态的前提是 pages.json 中需要先注册页面，才能支持 switch切换函数
    // 为了不闪烁，要求配置页面时全部隐藏
    // 初始化进入页面后，代码决定展示哪些

    uni.setTabBarItem({
      index: 0,
      visible: true,
    });
    uni.setTabBarItem({
      index: 1,
      visible: true,
    });
    uni.setTabBarItem({
      index: 2,
      visible: true,
    });
    uni.setTabBarItem({
      index: 3,
      visible: true,
    });

    uni.setTabBarItem({
      index: 4,
      visible: false,
    });
  },
  components: {},
  data() {
    return {
      isGray: false,
      current: 2,
    };
  },
  methods: {
    switchTab(current) {
      switch (current) {
        //
        case "0":
          uni.setTabBarStyle({
            backgroundColor: "#adff2f50", // 红色背景
            color: "#8a2be2",
            selectedColor: "#f08080",
          });

          // 动态修改某个 tab 项
          uni.setTabBarItem({
            index: 0, // tab 项索引
            text: "已修改", // 修改文字
            iconPath:
              "http://172.16.103.111:8080/group1/biz/pub/t_biz_attachment/cms_material_group1/2025-03-24/2e700e2c-3de8-42b9-8a19-80a8bf90bfb7.png", // 修改图标
            selectedIconPath:
              "http://172.16.103.111:8080/group1/biz/pub/t_biz_attachment/cms_material_group1/2025-03-24/2e700e2c-3de8-42b9-8a19-80a8bf90bfb7.png", // 修改选中图标
          });

          break;
        //
        case "1":
          uni.setTabBarStyle({
            backgroundColor: "#f0808050", // 红色背景
            color: "#00000050",
            selectedColor: "#FFFFFF",
          });

          // 动态修改某个 tab 项
          uni.setTabBarItem({
            index: 1, // tab 项索引
            text: "已修改", // 修改文字
            iconPath: "/static/logo2.png", // 修改图标
            selectedIconPath: "/static/logo2.png", // 修改选中图标
          });

          break;
        //
        case "2":
          uni.setTabBarStyle({
            backgroundColor: "#f0ad4e50", // 红色背景
            color: "#00000050",
            selectedColor: "#000000",
          });

          // 动态修改某个 tab 项
          uni.setTabBarItem({
            index: 2, // tab 项索引
            text: "已修改", // 修改文字
            iconPath: "/static/logo3.png", // 修改图标
            selectedIconPath: "/static/logo3.png", // 修改选中图标
          });
          break;
        //
        case "3":
          uni.setTabBarStyle({
            backgroundColor: "#ff149330",
          });

          // 动态修改某个 tab 项
          uni.setTabBarItem({
            index: 3, // tab 项索引
            text: "已修改", // 修改文字
            iconPath: "/static/logo4.png", // 修改图标
            selectedIconPath: "/static/logo4.png", // 修改选中图标
          });
          break;
        //
        //修改TAB4,跳转,TAB新页面1
        case "4":
          // 动态修改某个 tab 项
          uni.setTabBarItem({
            index: 3, // tab 项索引
            text: "已修改", // 修改文字
            pagePath: "pages/indexNew",
            iconPath: "/static/logo4.png", // 修改图标
            selectedIconPath: "/static/logo4.png", // 修改选中图标
          });
          break;
        //
        //隐藏TAB4
        case "5":
          uni.setTabBarStyle({
            backgroundColor: "#f0e68c50", // 红色背景
          });

          // 动态修改某个 tab 项
          uni.setTabBarItem({
            index: 3, // tab 项索引
            visible: false,
          });
          break;
        //
        //隐藏TAB4,并展示TAB5
        case "6":
          // 动态修改某个 tab 项
          uni.setTabBarItem({
            index: 3, // tab 项索引
            visible: false,
          });

          // 动态修改某个 tab 项
          uni.setTabBarItem({
            index: 4, // tab 项索引
            visible: true,
            iconPath: "/static/logo4.png", // 修改图标
            selectedIconPath: "/static/logo4.png", // 修改选中图标
          });
          break;
        case "7":
          uni.setTabBarStyle({
            backgroundColor: "#00000050",
            color: "#00000050",
            selectedColor: "#000000",
          });
          this.isGray = !this.isGray;

          if (!this.isGray) {
            uni.setTabBarStyle({
              backgroundColor: "#FFFFFF",
              color: "#00000050",
              selectedColor: "#000000",
            });
          }
          break;
        case "8":
          uni.showTabBarRedDot({
            index: 0,
          });
          break;
        case "9":
          uni.setTabBarBadge({
            index: 1,
            text: "99+",
          });
          break;
        case "10":
          uni.hideTabBarRedDot({
            index: 0,
          });
          break;
        case "11":
          uni.removeTabBarBadge({
            index: 1,
          });
          break;
      }
    },
  },
};
</script>

<style>
.gray-mode {
  filter: grayscale(90%);
}
</style>
